<template>
	<!--通讯录-右侧列表-->
	<scroll-view class="scroll-list" :scroll-top="1" scroll-y="true" :scroll-with-animation="scrollAnimationOFF"
		:scroll-into-view="scrollViewId" :style="{height:winHeight + 'px'}" @scroll="handleScroll">
		<view class="phone-list">
			<view class="list-item" v-for="(item, index) in phones" :key="index" :id="item.no">
				<view class="list-item-title" v-if="item.pho.length>0">{{item.name}}</view>
				<view class="list-item-phone" @click="handleClick" hover-class="commonly-hover" :hover-start-time="20"
					:hover-stay-time="70" v-for="(ite,ind) in item.pho" :key="ind" :data-name="ite.nickname"
					:data-id="ite.uid" :data-phoneNumber="ite.phoneNumber">

					<view class="item-li-l" v-if="is_checked" @click.stop="todetail(ite.uid)">
						<image class="li-img" :src="ite.img || $mAssetsPath.icon_mrtx" mode="aspectFill"></image>
						<view class="li-txt">
							{{ ite.nickname }}
							<text class="li-tag" v-if="ite.role_name != null && ite.type == 1">{{ite.role_name}}</text>
							<text class="li-tag" v-if="ite.type == 2">{{ite.is_admin == 0 ? '成员' : '主管'}}</text>
						</view>
					</view>

					<view class="item-li" @click.stop="changecheck(ite.uid,ite.checked)" v-else>
						<view class="item-li-l">
							<image class="li-img" :src="ite.img || $mAssetsPath.icon_mrtx" mode="aspectFill"></image>
							<view class="li-txt">{{ ite.nickname }}
							<text class="li-tag"v-if="ite.role_name != null && ite.type == 1">{{ite.role_name}}</text>
							<text class="li-tag"v-if="ite.type == 2">{{ite.is_admin == 0 ? '成员' : '主管'}}</text>
							</view>
						</view>
						<view class="item-li-r">
							<image class="icon-check"
								:src="ite.checked ? $mAssetsPath.icon_check_on : $mAssetsPath.icon_check" mode="aspectFill"></image>
						</view>
					</view>

				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		name: "phone-list",
		props: {
			phones: Array,
			letter: {
				type: String,
				default: ''
			},
			is_checked: {
				type: Boolean,
				default: true
			},
			scrollAnimationOFF: Boolean
		},
		data() {
			return {
				winHeight: 0,
				scrollTop: 0,
				letterDetails: [],
				timer: null
			}
		},
		computed: {
			scrollViewId() {
				console.log(888, this.letter)
				return this.letter
			}
		},
		mounted() {
			console.log(2222,this.phones)
			// #ifndef APP-PLUS
			this.winHeight = uni.getSystemInfoSync().windowHeight - 45
			//#endif

			//#ifdef APP-PLUS
			this.winHeight = uni.getSystemInfoSync().windowHeight - 80
			//#endif

		},
		methods: {
			//跳转详细页
			todetail(uid) {
				this.$emit('todetail', uid)
			},
			//右侧列表选中
			changecheck(uid, checked) {
				this.$emit('changecheck', uid, checked)
			},
			handleClick(e) {
				this.$emit('handleClick', e.target.dataset)
			},
			handleScroll(e) {
				console.log(99, e)
				if (this.letterDetails.length === 0) {
					let view = uni.createSelectorQuery().selectAll('.list-item')
					view.boundingClientRect(data => {
						let top = data[0].top
						console.log(1122, data)
						data.forEach((item, index) => {
							item.top = item.top - top
							item.bottom = item.bottom - top
							this.letterDetails.push({
								id: item.nickname,
								top: item.top,
								bottom: item.bottom
							})
						})
					}).exec()
				}

				const scrollTop = e.detail.scrollTop
				this.letterDetails.some((item, index) => {
					if (scrollTop >= item.top && scrollTop <= item.bottom - 5) {
						this.$emit('change', item.id)
						this.$emit('reset', true)
						return true
					}
				})
				console.log(100, this.letterDetails)
			}
		}

	}
</script>

<style lang="scss">
	.commonly-hover {
		background-color: #eee;
	}

	.scroll-list {
		flex: 1;
		height: 100vh;
		overflow-y: hidden;
	}

	.phone-list {
		display: flex;
		background-color: #fff;
		flex-direction: column;
		position: relative;
		width: 100%;
		padding-bottom: 60rpx;
		.list-item {
			width: 100%;
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			background-color: #fff;
		}
	}

	

	.list-item>.list-item-phone {
		font-weight: normal;
	}

	.list-item-title {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		background: $uni-bg-color-grey;
		font-size: 28rpx;
		font-weight: 400;
		color: $font-color-3;
		padding: 0 24rpx;
	}

	.list-item-phone {
		width: 100%;
		display: flex;
		flex-direction: column;
		font-size: 32upx;
		font-weight: bold;
		padding: 0 24upx;
		border-bottom: 1px solid #F2F4F5;

		.item-li-l {
			width: 100%;
			display: flex;
			align-items: center;
			height: 120upx;
			line-height: 120upx;

			.li-img {
				width: 80rpx;
				height: 80rpx;
				margin-right: 24rpx;
				border-radius: 10rpx;
			}

			.li-txt {
				font-size: 32rpx;
				color: $font-color-3;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				.li-tag {
					margin-left: 20rpx;
					height: 28rpx;
					border: 1rpx solid $border-color-blue;
					border-radius: 4rpx;
					padding: 0 10rpx;
					font-size: 20rpx;
					font-weight: 400;
					line-height: 26rpx;
					color: $font-color-b3;
				}
			}
		}

		.item-li {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 120rpx;
			background: #fff;
			width: 100%;

			.item-li-l {
				width: calc(100% - 80rpx);
				display: flex;
				align-items: center;

				.li-img {
					width: 80rpx;
					height: 80rpx;
					margin-right: 24rpx;
					border-radius: 10rpx;
				}

				.li-txt {
					font-size: 32rpx;
					color: $font-color-3;

					.li-tag {
						margin-left: 20rpx;
						height: 28rpx;
						border: 1rpx solid $border-color-blue;
						border-radius: 4rpx;
						padding: 0 10rpx;
						font-size: 20rpx;
						font-weight: 400;
						line-height: 28rpx;
						color: $font-color-b3;
					}
				}
			}

			.item-li-r {
				display: flex;
				justify-content: flex-end;
				width: 80rpx;
				.icon-check {
					width: 36rpx;
					height: 36rpx
				}
			}
		}
	}
</style>
